<!--
 	* @author  guojiteng
 	* @desc 首页弹窗配置
-->
<template>
  <div class="home-dialog">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="弹窗样式" prop="type">
        <el-select v-model="form.type" style="width: 80%" placeholder="请选择">
          <el-option v-for="item in popStyleList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-radio-group v-if="form.type!==''" v-model="radio">
          <el-radio :label="1">展示样式图</el-radio>
          <el-radio :label="2">关闭样式图</el-radio>
        </el-radio-group>
        <br>
        <el-image v-if="form.type!=='' && radio===1" style="width: 375px;margin-top: 10px;" :src="popStyleList[form.type].imagesOss" />
      </el-form-item>
      <el-form-item label="弹窗标题" prop="title">
        <el-input v-model="form.title" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="弹窗内容" prop="content">
        <tinymce v-if="showtinymce" v-model="form.content" :is-oss="isOss" :height="300" />
      </el-form-item>
      <el-form-item label="按钮名称" prop="btnName">
        <el-input v-model="form.btnName" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="跳转链接" prop="btnLink">
        <el-input v-model="form.btnLink" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="链接类型" prop="linkType">
        <el-radio-group  v-model="form.linkType">
          <el-radio label="1">内部</el-radio>
          <el-radio label="2">外部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          style="width: 80%"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          style="width: 80%"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="提醒类型">
        <el-radio-group v-model="form.remindType">
          <el-radio label="1">仅提醒一次</el-radio>
          <el-radio label="2">每日提醒</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.remindType==='2'" label="提醒次数" prop="remindNum">
        <el-input v-model="form.remindNum" oninput="value=value.replace(/[^0-9.]/g,'')" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { randomStringForId } from '@/utils/index'
export default {
  name: 'HomeDialog',
  components: {Tinymce},
  props: {
    obj: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      radio: 1,
      showtinymce: false,
      isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false,
      form: {
        id: '',
        name:'',
        type: '',
        title: '',
        content: '',
        btnName: '',
        btnLink: '',
        linkType:'1',
        startTime: '',
        endTime: '',
        remindType: '1', // 1仅提醒一次 2每日提醒
        remindNum: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择弹窗样式', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入弹窗标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入弹窗内容', trigger: 'change' }
        ],
        btnName: [
          { required: true, message: '请输入按钮名称', trigger: 'blur' }
        ],
        btnLink: [
          { required: true, message: '请输入跳转链接', trigger: 'blur' }
        ],
        linkType: [
          { required: true, message: '请选择链接类型', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        remindNum: [
          { required: true, message: '请输入提醒次数', trigger: 'blur' }
        ]
      },
      popStyleList: [
        {
          id: 0,
          name: '样式一',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202cc96931db26743919206900e8a2f390d.png'
        },
        {
          id: 1,
          name: '样式二',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/22120231f566d987e046718fe2eeae498020b6.png'
        },
        {
          id: 2,
          name: '样式三',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212027a85a262f6da40b8ab08ff5f8788f276.png'
        },
        {
          id: 3,
          name: '样式四',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202d7f2d0d9c2cd40d1a474301bdae7e155.png'
        },
        {
          id: 4,
          name: '样式五',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212026bf78ddb405c4affa83fab281ba8cf02.png'
        },
        {
          id: 5,
          name: '样式六',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202827b3f4b16a54addb0ae0fdc1d0ac910.png'
        },
        {
          id: 6,
          name: '样式七',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202ff3f9084d3bb4f1abb6ca173f24a253b.png'
        },
        {
          id: 7,
          name: '样式八',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212022fc3e4e4f9484ceabea370fab0c5e407.png'
        },
        {
          id: 8,
          name: '样式九',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/0/23/03/02/2303026e472822944b478483768a890a2d7594.png'
        }
      ]
    }
  },
  created() {
    if (this.obj.id === undefined) {
      this.form.id = randomStringForId(10)
    } else {
      this.form = this.obj
    }
    this.showtinymce = true
  },
  methods: {
    onSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('send', this.form)
        } else {
          console.log('error submit!!')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .home-dialog{
    height: 530px;
    overflow: auto;
  }
</style>
